<template><div><p>本文档最新版为 <a href="https://learnku.com/docs/laravel/10.x" target="_blank" rel="noopener noreferrer">10.x</a>，旧版本可能放弃维护，推荐阅读最新版！</p>
<h2 id="laravel-的前端资源处理-javascript-css-构建" tabindex="-1"><a class="header-anchor" href="#laravel-的前端资源处理-javascript-css-构建"><span>Laravel 的前端资源处理 JavaScript＆CSS 构建</span></a></h2>
<ul>
<li><a href="#introduction">简介</a></li>
<li><a href="#writing-css">编写 CSS</a></li>
<li><a href="#writing-javascript">编写 JavaScript</a>
<ul>
<li><a href="#writing-vue-components">编写 Vue 组件</a></li>
<li><a href="#using-react">使用 React</a></li>
</ul>
</li>
</ul>
<h2 id="简介" tabindex="-1"><a class="header-anchor" href="#简介"><span>简介</span></a></h2>
<p>Laravel 并没有规定你使用哪个 JavaScript 或 CSS 预处理器，不过它还是提供了对大多数应用都很适用的 <a href="http://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a> 和 <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue</a> 来作为默认的起点。默认情况下，Laravel 使用 <a href="https://npmjs.org/" target="_blank" rel="noopener noreferrer">NPM</a> 安装这两个前端依赖。</p>
<h4 id="css" tabindex="-1"><a class="header-anchor" href="#css"><span>CSS</span></a></h4>
<p><a href="https://learnku.com/docs/laravel/5.5/mix" target="_blank" rel="noopener noreferrer">Laravel Mix</a> 提供了一个内容丰富且简洁的 API 用以编译 SASS 或 Less，这些 CSS 预处理语言扩充了 CSS 语言，增加了诸如变量、mixins 及其他一些功能强大的扩展让编写 CSS 代码变得更加有趣。尽管我们会在这里简要的讨论 CSS 编译的内容，但你应该查阅 <a href="https://learnku.com/docs/laravel/5.5/mix" target="_blank" rel="noopener noreferrer">Laravel Mix 文档</a> 获取更多关于编译 SASS 或 Less 的信息。</p>
<h4 id="javascript" tabindex="-1"><a class="header-anchor" href="#javascript"><span>JavaScript</span></a></h4>
<p>Laravel 并不需要你使用特定的 JavsScript 框架或者库来构建应用程序。事实上，你也可以完全不用 JavaScript。不过，Laravel 自带了一些基本的脚手架，能更容易地使用 <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue</a> 编写 JavaScript。Vue 提供了健壮的组件化 API 用来构建强大的 JavaScript 应用程序。与 CSS 一样，我们可以使用 Laravel Mix 轻松地将 JavaScript 组件编译成一个浏览器可使用的 JavaScript 文件。</p>
<h4 id="移除前端脚手架" tabindex="-1"><a class="header-anchor" href="#移除前端脚手架"><span>移除前端脚手架</span></a></h4>
<p>如果要从你的应用程序中移除前端脚手架，可以使用 Artisan 命令 <code v-pre>preset</code>。该命令加上 <code v-pre>none</code> 选项时，将从应用程序中删除 Bootstrap 和 Vue 脚手架，只留下一个空白的 SASS 文件和一些常用的 JavaScript 实用程序库:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">php artisan preset none</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="编写-css" tabindex="-1"><a class="header-anchor" href="#编写-css"><span>编写 CSS</span></a></h2>
<p>Laravel 的 <code v-pre>package.json</code> 文件引入了 <code v-pre>bootstrap-sass</code> 依赖包，可以帮助你使用 Bootstrap 构建应用程序的前端原型。不过，你可以根据自己应用程序的需要在 <code v-pre>package.json</code> 灵活的添加或者移除依赖包。你不是一定要使用 Bootstrap 框架来构建你的 Laravel 应用程序，它只是给那些想用它的人提供一个很好的起点。</p>
<p>在编译 CSS 代码之前，需要你先使用 <a href="https://www.npmjs.org/" target="_blank" rel="noopener noreferrer">Node 包管理工具(NPM)</a> 来安装项目的前端依赖：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm install</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>使用 <code v-pre>npm install</code> 成功安装依赖后，你就可以使用 <a href="https://learnku.com/docs/laravel/5.5/mix#working-with-stylesheets" target="_blank" rel="noopener noreferrer">Laravel Mix</a> 来将 SASS 文件编译为纯 CSS。<code v-pre>npm run dev</code> 命令会处理 <code v-pre>webpack.mix.js</code> 文件中的指令。通常情况下，编译好的 CSS 代码会被放置在 <code v-pre>public/css</code> 目录：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm run dev</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>Laravel 自带的 <code v-pre>webpack.mix.js</code> 默认会编译 <code v-pre>resources/assets/sass/app.scss</code> SASS 文件。<code v-pre>app.scss</code> 文件导入了一个包含 SASS 变量的文件，并加载 Bootstrap，这对大多数程序来说很方便。你也可以根据自己的需要去定制 <code v-pre>app.scss</code> 文件的内容，甚至使用完全不同的预处理器，详细配置见 <a href="https://learnku.com/docs/laravel/5.5/mix" target="_blank" rel="noopener noreferrer">配置 Laravel Mix</a>。</p>
<h2 id="编写-javascript" tabindex="-1"><a class="header-anchor" href="#编写-javascript"><span>编写 JavaScript</span></a></h2>
<p>在项目根目录中的 <code v-pre>package.json</code> 可以找到应用程序的所有 JavaScript 依赖。它和 <code v-pre>composer.json</code> 文件类似，不同的是它指定的是 JavaScript 的依赖而不是 PHP 的依赖。使用 <a href="https://npmjs.org/" target="_blank" rel="noopener noreferrer">Node 包管理器 (NPM)</a> 来安装这些依赖包：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm install</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>{tip} 默认情况下，Laravel <code v-pre>package.json</code> 文件默认会包含一些依赖包来帮助你构建 JavaScript 应用程序，例如 <code v-pre>vue</code> 和 <code v-pre>axios</code> 。你可以根据需要在 <code v-pre>package.json</code> 中添加或者移除依赖。</p>
</blockquote>
<p>安装依赖之后，就可以使用 <code v-pre>npm run dev</code> 命令来 <a href="https://learnku.com/docs/laravel/5.5/mix" target="_blank" rel="noopener noreferrer">编译资源文件</a> 。Webpack 是一个为现代 JavaScript 应用而生的模块构建工具。当你运行 <code v-pre>npm run dev</code> 命令时，Webpack 会执行 <code v-pre>webpack.mix.js</code> 文件中的指令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm run dev</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>默认情况下，Laravel 的 <code v-pre>webpack.mix.js</code> 会编译 SASS 文件和 <code v-pre>resources/assets/js/app.js</code> 文件。你可以在 <code v-pre>app.js</code> 文件中注册你的 Vue 组件，或者如果你更喜欢其他的框架，请配置自己的 JavaScript 应用程序。编译好的 JavaScript 文件通常会放置在 <code v-pre>public/js</code> 目录。</p>
<blockquote>
<p>{tip} <code v-pre>app.js</code> 会加载 <code v-pre>resources/assets/js/bootstrap.js</code> 文件来启动并 配置 Vue、Axios、jQuery 以及其他的 JavaScript 依赖。如果你有其他的 JavaScript 依赖需要去配置，你也可以在这个文件中完成。</p>
</blockquote>
<h3 id="编写-vue-组件" tabindex="-1"><a class="header-anchor" href="#编写-vue-组件"><span>编写 Vue 组件</span></a></h3>
<p>新 Laravel 程序默认会在 <code v-pre>resources/assets/js/components</code> 中包含一个 <code v-pre>ExampleComponent.vue</code> 的 Vue 组件。<code v-pre>ExampleComponent.vue</code> 文件是在同一文件中定义其 JavaScript 和 HTML 模板的 <a href="https://vuejs.org/guide/application.html#Single-File-Components" target="_blank" rel="noopener noreferrer">单文件 Vue 组件</a> 的示例。它为构建 JavaScript 驱动的应用程序提供了非常方便的方法。这个示例组件已经在 <code v-pre>app.js</code> 文件中注册：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">Vue<span class="token operator">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'example-component'</span><span class="token punctuation">,</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'./components/ExampleConponent.vue'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>在应用程序中使用组件，你只需要简单的将其放到你的 HTML 模板之中。例如，运行 Artisan 命令 <code v-pre>make:auth</code> 去生成应用的用户认证和注册的框架页面后，可以把组件放到 <code v-pre>home.blade.php</code> Blade 模板中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">extends</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'layouts.app'</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">@<span class="token function">section</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>example<span class="token operator">-</span>component<span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>example<span class="token operator">-</span>component<span class="token operator">></span></span>
<span class="line">@endsection</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>{tip} 谨记，每次修改 Vue 组件后都应该运行 <code v-pre>npm run dev</code> 命令。或者，你可以使用 <code v-pre>npm run watch</code> 命令来监控并在每次文件被修改时自动重新编译组件。</p>
</blockquote>
<p>当然，如果你对编写 Vue 组件的内容感兴趣，你可以读一下 <a href="http://vuejs.org/guide/" target="_blank" rel="noopener noreferrer">Vue 文档</a>，该文档内容全面又易于阅读。</p>
<h3 id="使用-react" tabindex="-1"><a class="header-anchor" href="#使用-react"><span>使用 React</span></a></h3>
<p>如果你喜欢用 React 来构建你的 JavaScript 应用程序，Laravel 很容易就能将 Vue 脚手架替换为 React 脚手架。在任何新建的 Laravel 应用程序下，你可以用 <code v-pre>preset</code> 命令加 <code v-pre>react</code> 选项:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">php artisan preset react</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>该命令将移除 Vue 脚手架并用 React 脚手架替换， 包括 Laravel 自带的示例组件。</p>
<h2 id="译者署名" tabindex="-1"><a class="header-anchor" href="#译者署名"><span>译者署名</span></a></h2>
<table>
<thead>
<tr>
<th>用户名</th>
<th>头像</th>
<th>职能</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://learnku.com/users/5350" target="_blank" rel="noopener noreferrer">@JokerLinly</a></td>
<td><img src="https://cdn.learnku.com/uploads/avatars/5350_1481857380.jpg" alt="5350_1481857380.jpg"></td>
<td>Review</td>
<td>Stay Hungry. Stay Foolish.</td>
</tr>
</tbody>
</table>
<hr>
<blockquote>
<p>{note} 欢迎任何形式的转载，但请务必注明出处，尊重他人劳动共创开源社区。</p>
<p>转载请注明：本文档由 Laravel China 社区 <a href="https://laravel-china.org/" target="_blank" rel="noopener noreferrer">laravel-china.org</a> 组织翻译，详见 <a href="https://learnku.com/laravel/t/5756/laravel-55-document-translation-call-come-and-join-the-translation" target="_blank" rel="noopener noreferrer">翻译召集帖</a>。</p>
<p>文档永久地址： <a href="https://learnku.com/docs/laravel" target="_blank" rel="noopener noreferrer">《Laravel 中文文档》</a></p>
</blockquote>
</div></template>


